<template>
	<view>
		<view class="load" v-if="!load">
			<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
		</view>
		<view class="assistant" v-else>
			<top-status></top-status>
			<view class="topBox">
				<view class="puadd" @click="nav_to('/pages/user/search')">
					<uni-icons type="search" size="30"></uni-icons>
				</view>
				<!-- <view class="hyq">挥友</view> -->
				<view v-for="(item, index) in tab" :key="index" class="tab3" :class="{ 'tab4': tabInd == index }"
					@click="tabInd = index">
					{{ item }}
				</view>
			</view>

			<!-- <view class="fixHeight">
				<top-status></top-status>
				<view class="logo">
				</view>
				<view class="tabssearch wap"></view>
				<view class="tabs"></view>
			</view> -->
			<x-scroll @scroll="scroll" :fixed="true" :isNav="true" @onRefresh="onRefresh" @scrolltolower="scrolltolower"
				:refresh="true" :offset="140" :extraheight="92">
				<view class="message_box" v-if="MsgNum > 0" @click="tab_to('/pages/tab/msg')">
					<view class="item"> 有{{ MsgNum }}条消息</view>
				</view>
				<view v-show="false" class="user_status_box" v-if="is_show_app_tips">
					<view class="item"> <text @click="nav_to('/pages/user/apply_member')">挥友会员特权及优惠介绍</text>
						<view class="close" @click="close_app_tips()"> X </view>
					</view>
				</view>
				<!-- <view class="user_status_box" v-if="userStatus==99" @click="nav_to('/pages/other/user_apply')">
					您的账号行为存在违规行为，已被禁用，点击这里申诉
				</view> -->
				<view v-if="list.length > 0" class="list wap" :class="{ paddingBootom: osName != 'ios' }">
					<block v-for="(item) in list" :key="item.ID">
						<view class="item" @click="nav_to(`/pages/user/user_visitor?id=${item.ID}`)">
							<view class="top">
								<view class="tagbox">
									<view class="tagcolor" v-if="item.Tag == '教练'">教练</view>
									<view class="tagcolor2" v-if="item.Tag == '星助教'">星助教</view>
								</view>
								<view class="imgbox">
									<image :src="item.UserImgs + '?x-oss-process=image/resize,m_fill,w_700'"
										mode="aspectFill" />
								</view>
								<view class="online">{{ getTime(item.UpdateTime) }}在线</view>
								<!-- <view class="pop" v-if="item.PopSeq>0">
									<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/hot.png" class="hot_icon">
									</image>{{item.SeqStr}}{{item.PopSeq}}
								</view> -->


								<view class="bottomContent">
									<view class="personInfo">
										<view class="imageContent">
											<image :src="item.UserImgs + '?x-oss-process=image/resize,m_fill,w_700'"
												mode="aspectFill"></image>
										</view>
										<view class="textContent">
											<text lines="1" class="textContentName hiddenText">{{
												$util.entitiesToUtf16(item.Name) }}</text>
											<text lines="1" decode="true" class="textContentInfo">{{
												getYearStr(item.Birthday) == '未知' ? '未知' : getYearStr(item.Birthday) + '后' }}｜{{
													item.City ? item.City : '' }}</text>
										</view>
									</view>

									<view class="distance">
										<uni-icons type="location-filled" size="20" color="white"></uni-icons>
										<text> {{ item.Distance ? item.Distance + ' km' : '未知' }}</text>
									</view>
								</view>
							</view>
						</view>

						<!-- <block v-if="index==4">
							在第6个位置插入一个 人气榜单
							<view class="item">
								<view class="pop_item" @tap="nav_to('/pages/dynamic/popularity?tabInd=0')">
									<view class="head_box">
										<view v-if="pop_list.length>0" class="head_left">
											<view class="head_top">
												<image :src="pop_list[0].UserImgs" mode="aspectFill"></image>
												<view class="head_carry">
													<view class="head_one">
														1
													</view>
													<image :src="pop_list[0].UserImgs" mode="aspectFill"></image>
													<view class="carry_name">
														{{pop_list[0].Name}}
													</view>
												</view>
											</view>
											<view class="head_btm">
												<view class="btm_box">
													<image :src="pop_list[1].UserImgs" mode="aspectFill"></image>
													<view class="btm_name">
														{{pop_list[1].Name}}
													</view>
													<view class="btm_num">
														2
													</view>
												</view>
												<view class="btm_box">
													<image :src="pop_list[2].UserImgs" mode="aspectFill"></image>
													<view class="btm_name">
														{{pop_list[2].Name}}
													</view>
													<view class="btm_num" style="border: 4rpx solid #e8a867;">
														3
													</view>
												</view>
											</view>
											<view class="title">
												<view class="title_name">
													人气榜
												</view>
												<view class="title_cont">
													火辣的人气挥友
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</block> -->
					</block>
					<view style="width: 200px; height: 100rpx;margin-left: 70rpx;"></view>
				</view>
				<block v-else>
					<u-empty mode="list" width="64" height="64"
						icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17124806786111367.png" :show="true"
						iconSize="32" text="努力加载挥友信息"></u-empty>
				</block>
			</x-scroll>

			<!-- <view class="registerbox" v-if="auth == 0">
				<image class="regimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1712886837972785.png">
				</image>
				<view>
					<view class="regtitle_1">欢迎来到挥友圈</view>
					<view class="regtitle_2">赶紧注册来认识更多挥友吧</view>
				</view>
				<view class="regbtn" @click="gotostart">注册领好礼</view>
			</view> -->
			<!-- 优惠卷弹窗 -->
			<!-- <view v-if="iscoupon || isreceive" class="couponbox">
				<view style="width: 90%;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%)">
					<image class="titleh1"
						src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1712889460150219.png"></image>
					<view class="coupon">
						<view class="title1">用户惊喜福利</view>
						<view v-if="couponlist.length > 0">
							<view class="conbox" v-for="(value, index) in couponlist" :key="index">
								<image class="conimg"
									src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17128895330751157.png">
								</image>
								<view>
									<view class="contitle_1">{{ value.Title }}</view>
									<view class="contitle_2">领取后30天内有效</view>
								</view>
								<view class="numbox">x1</view>
							</view>
						</view>
						<view @click="couponstate" class="nicebtn">开心收下</view>
					</view>
					<image @click="closecoupon" class="closeimg"
						src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1712889568739446.png"></image>
				</view>
			</view> -->
		</view>

		<!-- 广告弹出层 -->
		<uni-popup ref="banner_ad" type="center">
			<view class="ad-popup" :style="{ width: ad_detail.Ad_Width + 'rpx', height: ad_detail.Ad_Height + 'rpx' }">
				<view class="popup-title">
					<view v-if="ad_detail.Close_Location == 'top-right'" class="popup-close"
						@click="$refs['banner_ad'].close()">关闭
					</view>
				</view>
				<image :src="ad_detail.Banner" mode="aspectFill" @click="go_ad_url(`${ad_detail.GoUrl}`)"></image>

				<view class="down-close" v-if="ad_detail.Close_Location == 'down'" @click="$refs['banner_ad'].close()">
					<uni-icons type="close" size="36" color="#fff"></uni-icons>
				</view>
			</view>
		</uni-popup>

		<!-- 会员到期窗口 -->
		<uni-popup ref="member_expired_pop" type="center">
			<view class="member-popup">
				<view class="popup-title">
					{{ IsExpiredUser.UserType }}到期通知
					<view class="popup-close" @click="$refs['member_expired_pop'].close()">
						<uni-icons type="closeempty" size="24"></uni-icons>
					</view>
				</view>
				<view class="tips">{{ IsExpiredUser.Msg }}</view>

				<!-- <view class="u-icon">
					<image :src="IsExpiredUser.UserTypeIcon" mode="aspectFill"></image>
				</view> -->
				<view class="desc">
					<view class="title">您即将失去以下权益：</view>
					<view class="txtbox">
						<view class="conbox" v-for="(item, index) in imglist" :key="index">
							<image class="conimg" :src="item.src"></image>
							<view class="context">{{ item.title }}</view>
						</view>
					</view>
					<!-- <view class="txt">√ 加好友</view> -->
					<!-- <view class="txt">√ 加微信</view> -->
					<!-- <view class="txt">√ 优先推荐</view> -->
					<!-- <block v-if="IsExpiredUser.UserType=='黑金卡会员'||IsExpiredUser.UserType=='黑金年卡会员'">
						<view class="txt">√ 定制球局和线下聚会</view>
						<view class="txt">√ 一键开聊理想型</view>
					</block> -->

				</view>

				<view class="pop_btn">
					<block v-if="IsExpiredUser.UserType == '年卡会员' || IsExpiredUser.UserType == '黑金年卡会员'">
						<view class="btn-upgrade" @click="expired_upgrade">赶快续期</view>
					</block>
					<block v-else>
						<view class="btn-upgrade" @click="expired_upgrade">开通会员</view>
					</block>
				</view>
				<view class="tips" v-if="show_close_expired_tips" @click="close_expired_tips">不再提示</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
import topStatus from "@/components/topStatus/topStatus.vue";

export default {
	async created() {
		if (await this.$store.getters.getLoginState) {

		}
	},
	components: {
		topStatus
	},
	data() {
		return {
			tab: ['推荐', '活跃', '新人'],
			auth: 0,
			isreceive: false, // 是否领取
			iscoupon: false, // 注册优惠卷弹窗
			couponlist: [],
			tabInd: 1,
			longitude: null,
			latitude: null,

			imgCurr: [],
			load: false,
			user: {},
			_freshing: true,
			list: [],
			PageIndex: 1,
			PageSize: 10,
			Name: "",

			Sex: "",
			UserType: "",
			GolfPoint: "",
			City: "",

			MsgNum: '',
			exposure_arr: new Set(), //曝光集合

			userList: [], //群成员列表
			conversationList: [], //会话列表
			groupList: [], //群聊列表
			sendUser: {},

			lastTime: 0,
			isRotated: false, //头像旋转
			idx: 0,

			ad_detail: {},
			msg_box: [],
			msg_index: 0,
			msg_item: {},

			is_show_app_tips: true,

			IsExpiredUser: {},
			show_close_expired_tips: false,

			//人气榜
			pop_list: [],
			ossPath: '',

			imglist: [
				{
					src: this.$ossPath + '/upload/17110902548021395.png',
					title: '加好友'
				},
				{
					src: this.$ossPath + '/upload/17110903071131233.png',
					title: '加微信'
				},
				{
					src: this.$ossPath + '/upload/171109032005821.png',
					title: '优先推荐'
				}
			],
			osName: 'ios'
		}
	},
	async onLoad(e) {
		this.isreceive = uni.getStorageSync('isreceive')
		this.ossPath = this.$ossPath;
		let that = this;
		uni.$on('getFiltrate', function (data) {
			if (data) {
				that.City = data.city || ''
				that.Sex = data.sex || ''
			}
		})

		if (uni.getStorageSync('show_member_tips')) {
			if (uni.getStorageSync('show_member_tips') == 1)
				this.is_show_app_tips = false;
			else
				this.is_show_app_tips = true;

		} else {
			this.is_show_app_tips = true;
		}

		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			withShareTicket: false,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif

		if (await this.$store.getters.getLoginState) {
			await this.getCity();

			if (uni.getStorageSync('Sex')) {
				this.Sex = uni.getStorageSync('Sex');
			}

			await this.init();

			await this.getAd();

			uni.$on('scroll_height', res => {
				this.scroll_height = res;
				this.calcExposure(0)
			});

			this.saveCid()
		}
		this.getPhoneInfo()
	},
	onShow() {
		this.iscoupon = uni.getStorageSync('iscoupon') || false
		this.auth = uni.getStorageSync('user').IsAuth
		this.getList();
	},
	onUnload() {
		uni.$off('getFiltrate')
	},
	methods: {
		getPhoneInfo() {
			uni.getSystemInfo({
				success: (res) => {
					this.osName = res.osName
				},
			});
		},
		//优惠卷弹窗状态
		couponstate() {
			// this.iscoupon = false
			this.isreceive = false
			uni.setStorageSync('iscoupon', false);
			uni.setStorageSync('isreceive', this.isreceive);
			this.nav_to('/pages/court/mycoupon?tabInd=' + 1);
		},
		closecoupon() {
			this.iscoupon = false
			this.isreceive = false
			uni.setStorageSync('iscoupon', false);
			uni.setStorageSync('isreceive', true);
		},
		//底部注册
		gotostart() {
			this.nav_to('/pages/start/start2');

		},
		async getIsExpiredUser() {
			if (uni.getStorageSync('user_expired_tips_num') > 5) {
				//当提示弹窗大于9次之后出现 “不再提示”的按钮
				this.show_close_expired_tips = true;
			}

			if (uni.getStorageSync('user_expired_tips_num') < 9999) {
				//判断用户是否到期
				let res = await this.$api.post('User/IsExpiredUser');

				if (res.data) {
					this.IsExpiredUser = res.data;
					if (this.IsExpiredUser.IsExpired) {
						this.$refs.member_expired_pop.open();
					}

					let n = uni.getStorageSync('user_expired_tips_num');
					uni.setStorageSync('user_expired_tips_num', n + 1);
				}
			}
		},
		expired_upgrade() {
			this.nav_to('/pages/user/apply_member');
			this.$refs.member_expired_pop.close();
		},
		close_expired_tips() {
			uni.setStorageSync('user_expired_tips_num', 9999);

			this.$refs.member_expired_pop.close();
		},
		async saveCid() {
			// #ifdef APP
			plus.runtime.setBadgeNumber(0);
			uni.getPushClientId({
				success: (res) => {
					//console.log(res);
					this.$api.post('/User/BindCID', {
						CID: res.cid
					});
				},
				fail(err) {
					console.log(err)
				}
			})
			// #endif
		},
		close_app_tips() {

			uni.setStorageSync('show_member_tips', 1);

			this.is_show_app_tips = false;

		},
		Register() {
			this.nav_to('/pages/start/start2')
		},
		//去群聊
		toGroupChat() {
			const groupID = '#AW1o76PXU'
			const name = '世界频道'
			this.nav_to(`/pages/chat/group_chat?id=${groupID}&type=2&name=&{name}`)
			// this.$im.clearNum(groupID, 2);
		},

		// 获取定位
		getLocationSysc() {
			let _this = this;
			return new Promise((resolve, reject) => {
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						resolve(res)
					},
					fail: function (err) {
						const defaultLocation = {
							latitude: 0,
							longitude: 0
						};
						resolve(defaultLocation);
					}
				});
			})

		},

		async getCity() {
			try {
				let loc = await this.getLocationSysc();
				this.longitude = loc.longitude;
				this.latitude = loc.latitude;
			} catch (err) {
				this.longitude = err.longitude;
				this.latitude = err.latitude;
			}

		},
		async getAd() {

			let res = await this.$api.post('/banner/getbanner', {
				PageKey: '测试广告'
			});

			//console.log('ad===' + JSON.stringify(res.data))

			if (res.data.length > 0) {

				this.ad_detail = res.data[0];
				this.$refs['banner_ad'].open();
			}

		},

		go_ad_url(url) {
			this.$refs['banner_ad'].close();

			this.nav_to(url);
		},
		//下拉刷新
		async onRefresh() {
			this.PageIndex = 1;
			if (await this.getList()) {
				uni.$emit('triggered');
			} else {
				setTimeout(() => {
					uni.$emit('triggered');
				}, 2000)
			}
		},
		//滚动到底部触发
		async scrolltolower() {
			this.PageIndex++;
			this.getList();

		},

		async save_user_clientdata() {
			let c_model = '';
			let c_system = ''
			uni.getSystemInfo({
				success(res) {
					c_model = res.model;
					c_system = res.system;
				}
			});
			//在线用户
			await this.$api.post('User/UserOnline', {
				ClientModel: c_model,
				ClientOS: c_system
			});

		},
		async search() {
			//搜索
			this.PageIndex = 1;
			this.list = [];

			let reqDate = {
				PageIndex: this.PageIndex,
				PageSize: this.PageSize,
				TrueName: this.Name,
				CompanyID: 6002,
				Sex: this.Sex,
				UserType: this.UserType,
				City: this.City,
				Last_Lat: this.latitude,
				Last_Lng: this.longitude,
			}

			let res = await this.$api.post('Member/PageList', reqDate)

			if (res.data) {

				let gift = await this.$api.post('/Member/AcceptGiftReports', {
					PageIndex: 1,
					PageSize: 10000,
					Last_Lat: 0,
					Last_Lng: 0,
				})
				//消费榜
				let com = await this.$api.post('/Member/SendGiftReports', {
					PageIndex: 1,
					PageSize: 10000,
					Last_Lat: 0,
					Last_Lng: 0,
				})

				//循环查询用户的人气榜，如果该用户同时 人气榜和消费榜都有名，优先显示 人气榜
				res.data.forEach((item, index) => {

					let sq = gift.data.findIndex((s) => s.ID == item.ID);

					if (sq >= 0) {
						item.PopSeq = sq + 1; //索引+1
						item.SeqStr = '人气榜第'
					} else {
						sq = com.data.findIndex((s) => s.ID == item.ID);
						if (sq > 0) {
							item.PopSeq = sq + 1; //索引+1
							item.SeqStr = '月消费第'
						} else {
							item.PopSeq = 0;
						}
					}

				});

				if (this.PageIndex == 1) {
					this.list = res.data
				} else {
					let list = this.list.concat(res.data)
					this.list = this.clearRepetition(list, "ID");
				}

				this.load = true;

			}
		},
		async getList() {
			let url;
			let reqDate;
			let UserActiveStatus = ""
			if (this.tabInd == 1) {
				url = 'Member/PageList';
				UserActiveStatus = "活跃"
				reqDate = {
					PageIndex: this.PageIndex,
					PageSize: this.PageSize,
					TrueName: this.Name,
					CompanyID: 6003,
					Sex: this.Sex,
					UserType: this.UserType,
					City: this.City,
					Last_Lat: this.latitude,
					Last_Lng: this.longitude,
					UserActiveStatus: UserActiveStatus
				}
			} else if (this.tabInd == 2) {
				url = 'Member/PageList';
				UserActiveStatus = "新人"
				reqDate = {
					PageIndex: this.PageIndex,
					PageSize: this.PageSize,
					TrueName: this.Name,
					CompanyID: 6002,
					Sex: this.Sex,
					UserType: this.UserType,
					City: this.City,
					Last_Lat: this.latitude,
					Last_Lng: this.longitude,
					UserActiveStatus: UserActiveStatus
				}
			} else if (this.tabInd == 0) {
				url = '/Member/Recommend';
				reqDate = {
					PageIndex: this.PageIndex,
					PageSize: this.PageSize,
					TrueName: this.Name,
					CompanyID: 6002,
					Sex: this.Sex,
					UserType: this.UserType,
					City: this.City,
					Last_Lat: this.latitude,
					Last_Lng: this.longitude
				}
			}


			let res = await this.$api.post(url, reqDate)


			if (res.data) {
				let gift = await this.$api.post('/Member/AcceptGiftReports', {
					PageIndex: 1,
					PageSize: 10000,
					Last_Lat: 0,
					Last_Lng: 0,
				})
				//消费榜
				let com = await this.$api.post('/Member/SendGiftReports', {
					PageIndex: 1,
					PageSize: 10000,
					Last_Lat: 0,
					Last_Lng: 0,
				})


				//循环查询用户的人气榜，如果该用户同时 人气榜和消费榜都有名，优先显示 人气榜
				res.data.forEach((item, index) => {
					let sq = gift.data.findIndex((s) => s.ID == item.ID);
					if (sq >= 0) {
						item.PopSeq = sq + 1; //索引+1
						item.SeqStr = '人气榜第'
					} else {
						sq = com.data.findIndex((s) => s.ID == item.ID);
						if (sq > 0) {
							item.PopSeq = sq + 1; //索引+1
							item.SeqStr = '月消费第'
						} else {
							item.PopSeq = 0;
						}
					}
				});

				if (this.PageIndex == 1) {
					this.list = res.data
				} else {
					let list = this.list.concat(res.data)
					this.list = this.clearRepetition(list, "ID");
				}
				this.load = true;

			}
		},
		// 去重
		clearRepetition(arr, key = "id") {
			let newArr = [];
			arr.forEach(item => {
				let index;
				let check = newArr.every((newItem, i) => {
					if (item[key] !== newItem[key]) {
						index = -1;
						return true;
					} else {
						index = i;

						return false;
					}
				})
				if (check) {
					newArr.push(item);
				} else {
					newArr.splice(index, 1, item);
				}

			})

			return newArr;
		},
		async init() {
			this.user = uni.getStorageSync('user');

			this.PageIndex = 1;

			await this.get_poplist();

			await this.getList();


			await this.$api.post('/Common/Add_ViewPath', {
				Path: 'assistant',
				Platform: uni.getStorageSync('platform')
			});

			await this.save_user_clientdata();

			this.getIsExpiredUser();
			// let res = await this.$api.post('Coupon/List', {
			// 	CompanyID: 6003
			// })
			// this.couponlist = res.data
		},
		scroll(e) {
			const detail = e.detail;
			this.calcExposure(detail.scrollTop)
		},
		calcExposure(scrollTop) {

			const height = uni.upx2px(542) //list高度

			const range = [Math.ceil(scrollTop / height), Math.floor((this.scroll_height + scrollTop) / height -
				1)] //获取从0排开始曝光序号区间
			if (this._range) {
				for (let i = this._range[0]; i <= this._range[1]; i++) {
					if (i < range[0] || i > range[1]) {
						clearTimeout(this['_st_' + i])
					}
				}
			}
			for (let i = range[0]; i <= range[1]; i++) {
				if (!this._range || i < this._range[0] || i > this._range[1]) {
					this['_st_' + i] = setTimeout(() => {
						if (!this.exposure_arr.has(i)) {
							this.exposure_arr.add(i)
							if (i * 2 > this.list.length - 1) {
								return;
							}
							const ids = [this.list[i * 2].ID, this.list[i * 2 + 1].ID]
							this.$api.post('/Common/UserExposure', {
								E_UserIDStr: ids.join(',')
							});

						}
					}, 800) //曝光时间设置
				}
			}

			this._range = range;
		},
		async get_poplist() {
			let res = await this.$api.post('/Member/AcceptGiftReports', {
				PageIndex: 1,
				PageSize: 5,
				Last_Lat: 0,
				Last_Lng: 0,
			})
			this.pop_list = res.data
		},

	},
	watch: {
		Sex(newVal) {
			this.PageIndex = 1
			this.init();
		},
		City(newVal) {
			this.PageIndex = 1
			this.init();
		},

		list(newVal) {
			newVal.forEach(item => {
				this.imgCurr.push(1);
			})
		},
		tabInd(newVal) {
			this.PageIndex = 1
			this.init();
		},
	},
	// onShareAppMessage(res) { //分享给朋友
	// 	let pid = uni.getStorageSync('user').UserID;
	// 	let userName = uni.getStorageSync('user').Name
	// 	let Name = this.$util.entitiesToUtf16(userName);
	// 	return {
	// 		title: `${Name}向您推荐了挥友圈，赶快来吧`,
	// 		path: `/pages/tab/assistant?pid=${pid}`,

	// 	}
	// },



}
</script>

<style lang="scss">
.topBox {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	// margin: 15rpx auto;
	// padding: 15rpx 0 ;
	height: 44px;
	margin-bottom: 20rpx;
	position: relative;

	.hyq {
		font-size: 36rpx;
		font-weight: 600;
		color: #333333;
	}

	.puadd {
		width: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 20rpx;
	}

	.tab3 {
		font-size: 32rpx;
		margin-right: 45rpx;
		// line-height: 44px;
		display: flex;
		font-weight: 700;
		color: #999999;

		.user_news {
			width: 62rpx;
			height: 36rpx;
			border-radius: 18rpx;
			font-size: 24rpx;
			color: #fff;
			background-color: #FD4C61;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: -15rpx;
			margin-top: 10rpx;
		}
	}

	.tab4 {
		color: #333333;
		position: relative;
		font-size: 36rpx;

		&::before {
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);
			bottom: -12rpx;
			display: block;
			content: "";
			width: 34rpx;
			height: 10rpx;
			background: linear-gradient(180deg, #a9a7f8 0%, #9796ed 100%);
			border-radius: 300rem;
		}
	}
}

.assistant {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

.registerbox {
	width: 90%;
	height: 128rpx;
	background-color: #000000;
	opacity: 0.8;
	border-radius: 24rpx;
	// margin: ;
	position: absolute;
	bottom: 5%;
	left: 4%;
	display: flex;
	align-items: center;

	.regimg {
		width: 72rpx;
		height: 72rpx;
		margin: 0 16rpx 0 24rpx;
	}

	.regtitle_1 {
		font-size: 28rpx;
		font-weight: 600;
		color: #fff;
		margin-bottom: 10rpx;
	}

	.regtitle_2 {
		font-size: 24rpx;
		color: #fff;
		opacity: 0.6;
	}

	.regbtn {
		width: 188rpx;
		height: 60rpx;
		border-radius: 32rpx;
		background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
		font-size: 28rpx;
		color: #4C310C;
		text-align: center;
		line-height: 60rpx;
		margin-left: 56rpx;
	}
}

.couponbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	z-index: 100;

	.titleh1 {
		width: 508rpx;
		height: 84rpx;
		margin-left: 70rpx;
		margin-bottom: 32rpx;
	}

	.coupon {
		position: relative;
		width: 576rpx;
		height: 548rpx;
		background-image: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17128894802161316.png');
		background-repeat: no-repeat;
		background-size: cover;
		margin-left: 35rpx;

		.title1 {
			width: 288rpx;
			height: 56rpx;
			border-radius: 0, 0, 20rpx, 20rpx;
			background: linear-gradient(180deg, #FFEBD4 0%, #FFE0AC 100%);
			text-align: center;
			line-height: 56rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #3B1E06;
			margin: 0 auto;
			margin-bottom: 36rpx;
		}

		.conbox {
			position: relative;
			background-image: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17128895073561466.png');
			background-repeat: no-repeat;
			background-size: cover;
			width: 496rpx;
			height: 120rpx;
			display: flex;
			align-items: center;
			margin: 0 auto;
			margin-bottom: 20rpx;

			.conimg {
				width: 96rpx;
				height: 96rpx;
			}

			.contitle_1 {
				font-size: 28rpx;
				font-weight: 600;
				color: #67370D;
			}

			.contitle_2 {
				font-size: 20rpx;
				color: #946032;
			}

			.numbox {
				position: absolute;
				right: 0;
				top: 0;
				background-image: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17128897267561216.png');
				background-repeat: no-repeat;
				background-size: cover;
				width: 64rpx;
				height: 32rpx;
				font-size: 20rpx;
				font-weight: 600;
				color: #fff;
				text-align: center;
				line-height: 26rpx;
			}
		}

		.nicebtn {
			width: 368rpx;
			height: 88rpx;
			position: absolute;
			bottom: 30rpx;
			left: 100rpx;
			border-radius: 47rpx;
			// margin: 0 auto;
			// margin-top: 54rpx;
			background: linear-gradient(90deg, #FEDCA1 0%, #FEC76D 100%);
			text-align: center;
			line-height: 88rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #3B1E06;
		}
	}

	.closeimg {
		width: 60rpx;
		height: 60rpx;
		margin-top: 40rpx;
		margin-left: 298rpx;
	}
}



.user_status_box {
	line-height: 50rpx;
	text-align: center;
	height: 72rpx;

	.item {

		height: 72rpx;
		line-height: 72rpx;
		background-color: #FEEECD;



		text {
			font-size: 28rpx;
			color: #B6722E;
			text-decoration: underline;
		}

		.close {
			width: 36rpx;
			height: 36rpx;
			font-size: 20rpx;
			color: #F3B065;
			background-color: rgba(255, 255, 255, 0.6);
			display: flex;
			align-items: center;
			justify-content: center;
			right: 26rpx;
			top: 20rpx;
			position: absolute;
		}
	}
}

.message_box {

	line-height: 64rpx;
	text-align: center;
	height: 64rpx;
	padding: 25rpx 0 15rpx 0;

	.item {
		text-align: center;
		width: 40%;
		border: 2px solid rgba(253, 249, 246, 0.4);
		border-radius: 12px;
		background-color: #E1C4A6;
		margin: 0 auto;
		font-weight: bold;
		color: #111111;
	}
}



.list {
	padding-left: 26rpx;
	padding-right: 26rpx;
	padding-bottom: 80rpx;
	//padding-bottom: constant(safe-area-inset-bottom); /* 适用于iOS */
	//padding-bottom: env(safe-area-inset-bottom); /* 适用于iOS */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	.item {
		margin-top: 20rpx;
		width: 340rpx;
		height: 450rpx;
		border-radius: 16rpx;
		overflow: hidden;
		background: #26252B;

		.top {
			position: relative;
			height: 450rpx;
			width: 340rpx;

			.tagbox {
				position: absolute;
				left: 0;
				top: 0;
				width: 80rpx;
				height: 40rpx;
				border-radius: 0 0 40rpx 0;
				z-index: 1000;

				.tagcolor {
					text-align: center;

					line-height: 40rpx;
					width: 100%;
					height: 100%;
					font-size: 20rpx;
					border-radius: 0 0 20rpx 0;

					color: black;
					background: linear-gradient(90deg, #C79F67 0%, #ECD5A0 100%);
				}

				.tagcolor2 {
					text-align: center;
					line-height: 40rpx;
					font-size: 20rpx;
					width: 100%;
					height: 100%;
					border-radius: 0 0 20rpx 0;
					color: #fff;

					background: linear-gradient(90deg, #E076E3 0%, #D67EEF 100%);
				}
			}

			.imgbox {
				position: relative;
				z-index: 1;
				height: 450rpx;
				width: 340rpx;

				image {
					height: 100%;
					width: 100%;
				}

			}

			.online {
				position: absolute;
				z-index: 10;
				top: 10rpx;
				right: 14rpx;
				color: #FFFFFF;
				font-size: 24rpx;

				&::before {
					display: inline-block;
					content: "";
					height: 16rpx;
					width: 16rpx;
					border-radius: 16rpx;
					background: #27BA2C;
					margin-right: 6rpx;
				}
			}

			.pop {
				box-sizing: border-box;
				position: absolute;
				z-index: 10;
				bottom: 140rpx;
				left: 7rpx;
				width: 220rpx;
				font-size: 24rpx;
				font-weight: bold;
				line-height: 40rpx;
				padding-left: 10rpx;
				color: #fff;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.bottomContent {
				box-sizing: border-box;
				position: absolute;
				z-index: 10;
				bottom: 0;
				left: 0;
				width: 340rpx;
				height: 145rpx;
				background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
				align-items: center;
				padding: 10rpx 15rpx 0rpx;
				display: flex;
				flex-direction: column;

				.personInfo {
					display: flex;

					.imageContent {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						margin: 4rpx 0 4rpx 0;
						overflow: hidden;

						>image {
							width: 60rpx;
							height: 60rpx;
						}
					}

					.textContent {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 20rpx;

						.textContentName {
							width: 215rpx;
							overflow-wrap: break-word;
							color: rgba(255, 255, 255, 1);
							font-size: 28rpx;
							font-family: PingFang-SC-Medium;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 40rpx;
						}

						.textContentInfo {
							overflow-wrap: break-word;
							color: rgba(255, 255, 255, 0.6);
							font-size: 20rpx;
							font-family: PingFang-SC-Medium;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 28rpx;
						}
					}
				}

				.distance {
					display: flex;
					align-items: center;
					width: 100%;
					margin-top: 15rpx;
					margin-left: 30rpx;

					>text {
						color: white;
						font-size: 22rpx;
					}
				}
			}
		}
	}
}

.paddingBootom {
	padding-bottom: 150rpx;
}

.HJ_head {
	width: 100%;
	height: 100%;
	background-color: #000;
	position: absolute;
	left: 0rpx;
	top: 0rpx;
	z-index: 999;
	opacity: 0.3;
	filter: alpha(opacity=30);
	display: none;

}


.ad-popup {
	background-color: #000;
	box-shadow: 0 0 15px #e7c91b;
	min-width: 550rpx;
	min-height: 500rpx;


	.popup-title {

		text-align: center;
		position: relative;
		color: #ffffff;
		font-weight: bold;

		.popup-close {
			font-size: 24rpx;
			position: absolute;
			right: 20rpx;
			top: 15rpx;
			color: #ffffff;
		}
	}

	.u-icon {

		text-align: center;

		image {
			width: 128rpx;
			height: 128rpx;
		}
	}

	image {
		width: 100%;
		height: 100%;
	}

	.down-close {
		width: 100%;
		text-align: center;
		align-items: center;
	}
}


.member-popup {
	background-image: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711089583152299.png');
	background-repeat: no-repeat;
	background-size: cover;
	min-width: 550rpx;
	min-height: 500rpx;
	padding: 10rpx 10rpx 20rpx 20rpx;
	border-radius: 25rpx;

	.popup-title {
		padding: 20rpx 0 10rpx;
		text-align: center;
		position: relative;
		color: #3D210A;
		font-weight: bold;
		font-size: 42rpx;

		.popup-close {
			font-size: 24rpx;
			position: absolute;
			right: 20rpx;
			top: 15rpx;
			color: #999898;
		}
	}

	.tips {
		width: 322rpx;
		height: 48rpx;
		border-radius: 24rpx;
		border: 1rpx solid #A6712B;
		color: #A6712B;
		margin-left: 134rpx;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.desc {
		color: #999;
		padding-left: 20rpx;
		text-align: left;
		padding-top: 20rpx;

		.txtbox {
			display: flex;
			justify-content: space-around;

			.conbox {
				.conimg {
					width: 92rpx;
					height: 92rpx;
					margin-bottom: 10rpx;
				}

				.context {
					color: #333333;
					font-size: 28rpx;
				}
			}
		}

		.title {
			font-size: 28rpx;
			line-height: 66rpx;
			height: 66rpx;
			color: #3D210A;
		}

		.txt {
			color: #999;
			font-size: 32rpx;
			height: 50rpx;
		}
	}

	.u-icon {

		text-align: center;

		image {
			width: 128rpx;
			height: 128rpx;
		}
	}

	image {
		width: 100%;
		height: 100%;
	}

	.down-close {
		width: 100%;
		text-align: center;
		align-items: center;
	}

	.pop_btn {
		padding: 30rpx 50rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;


		.btn-cancel {
			width: 150rpx;
			height: 50rpx;
			border-radius: 15rpx;
			color: #4C310C;
			font-size: 32rpx;
			letter-spacing: 2px;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #B98B51
		}

		.btn-comfirm {
			width: 150rpx;
			height: 50rpx;
			border-radius: 15rpx;
			background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
			color: #4C310C;
			font-size: 32rpx;
			letter-spacing: 2px;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #FEF0BC;
		}

		.btn-upgrade {
			width: 512rpx;
			height: 80rpx;
			background: #0D0D0D;
			color: #F7E0B2;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50rpx;
			margin-bottom: 20rpx;
		}


	}
}

.pop_item {
	.title {
		font-size: 32rpx;
		width: 100%;
		position: relative;
		top: -490rpx;

		.title_name {
			line-height: 36rpx;
			color: #fff;
			display: flex;

			.title_news {
				width: 60rpx;
				height: 36rpx;
				border-radius: 18rpx;
				font-size: 24rpx;
				color: #fff;
				background-color: #FD4C61;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 10rpx;
			}

		}

		.title_cont {
			font-size: 24rpx;
			color: #fff;
			margin-top: 10rpx;
		}
	}

	.head_box {
		display: flex;
		align-items: center;
		justify-content: space-between;


		.head_left {
			height: 320rpx;
			width: 100%;

			border-radius: 8rpx;

			.head_top {
				height: 350rpx;
				border-radius: 8rpx 8rpx 0 0;

				image {
					height: 350rpx;
					width: 100%;
					border-radius: 16rpx 16rpx 0 0;
					opacity: 0.6;
				}

				.head_carry {
					height: 90rpx;
					display: flex;
					align-items: center;
					position: relative;
					bottom: 130rpx;

					image {
						height: 90rpx;
						width: 90rpx;
						border-radius: 100rpx;
						opacity: 1;
						border: 4rpx solid #ffeccc;
					}

					.carry_name {
						color: white;
						margin-left: 20rpx;
						font-weight: 600;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						width: 160rpx;
					}

					.head_one {
						color: #fff;
						height: 30rpx;
						width: 30rpx;
						border-radius: 100rpx;
						border: 4rpx solid #ffeccc;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #000;
						position: relative;
						top: -30rpx;
						left: 30rpx;
						font-size: 24rpx;
						z-index: 2;
					}
				}
			}

			.head_btm {
				height: 160rpx;
				background-color: #e8e8e8;
				border-radius: 0 0 8rpx 8rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.btm_box {
					width: 48%;
					text-align: center;

					image {
						height: 70rpx;
						width: 70rpx;
						border-radius: 100rpx;
						opacity: 1;
						margin-top: 40rpx;
					}

					.btm_name {
						color: #000;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						text-align: center;
					}

					.btm_num {
						color: #fff;
						height: 25rpx;
						width: 25rpx;
						border-radius: 100rpx;
						border: 4rpx solid #cac9c8;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #000;
						position: relative;
						top: -130rpx;
						left: 35rpx;
						font-size: 20rpx;
					}
				}
			}
		}

	}
}
</style>